<template>
  <div class="statistics">
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item class="line">
          <div style="color: #49bdfb">统计</div>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="item1">
      <div class="x">
        <div class="y">
          <span>书籍库存</span>
        </div>
        <div>
          <span>{{ bookSum }}</span>
        </div>
      </div>
      <div class="x">
        <div class="y">
          <span>用户人数</span>
        </div>
        <div>
          <span>{{ userSum }}</span>
        </div>
      </div>
      <div class="x">
        <div class="y">
          <span>等待配送</span>
        </div>
        <div>
          <span>{{processingSum}}</span>
        </div>
      </div>
      <div class="x">
        <div class="y">
          <span>已经配送</span>
        </div>
        <div>
          <span>{{ deliveredSum }}</span>
        </div>
      </div>
    </div>
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item class="line">
          <div style="color: #49bdfb">销售量统计</div>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div id="main" class="item2"></div>
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item class="line">
          <div style="color: #49bdfb">销售额统计</div>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div id="main2" class="item3"></div>
  </div>
</template>

<script>
import bookApi from "@/api/books";
import statisticApi from "@/api/statistic";
import userApi from "@/api/user";
import orderApi from "@/api/order";
export default {
  data() {
    return {
      bookSum: 0,
      userSum: 0,
      deliveredSum: 0,
      processingSum:0,
    };
  },
  created() {
    this.fetch();
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    fetch() {
      bookApi.getAllBookCounts().then((response) => {
        this.bookSum = response.data.length;
      });
      userApi.selectAllUser().then((response) => {
        this.userSum = response.data.length;
      });
      orderApi.getAllOrderByStatus("0", "已完结").then((response) => {
        this.deliveredSum = response.data.length;
      });
      orderApi.getAllOrderByStatus("0", "待收货").then((response) => {
        this.processingSum = response.data.length;
      });
    },
    fetchData() {
      statisticApi.getEveryBookCounts().then((response) => {
        this.initCharts1();
        this.initCharts2();
      });
    },
    initCharts1() {
      var echarts = require("echarts");
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: [
            "公共课",
            "计算机类",
            "经济管理",
            "土木工程",
            "机械制造",
            "自动化类",
            "通信电子",
            "法律法规",
            "生化环材",
            "文史哲学",
            "医疗卫生",
            "艺术教育",
            "笔墨纸砚",
            "其它",
          ],
        },
        grid: {
          left: "3%",
          right: "4%",

          containLabel: true,
          height: "320",
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "公共课",
            type: "line",
            data: [2, 13, 11, 14, 10],
          },
          {
            name: "计算机类",
            type: "line",
            data: [6, 11, 13, 12, 14],
          },
          {
            name: "公共管理",
            type: "line",
            data: [14, 10, 13, 11, 14],
          },
          {
            name: "土木工程",
            type: "line",
            data: [13, 11, 14, 10, 12],
          },
          {
            name: "机械制造",
            type: "line",
            data: [6, 11, 12, 14, 13],
          },
          {
            name: "自动化类",
            type: "line",
            data: [11, 14, 10, 13, 11],
          },
          {
            name: "通信电子",
            type: "line",
            data: [10, 13, 11, 14, 10],
          },
          {
            name: "法律法规",
            type: "line",
            data: [3, 6, 9, 11, 14],
          },
          {
            name: "生化环材",
            type: "line",
            data: [8, 11, 8, 12, 9],
          },
          {
            name: "文史哲学",
            type: "line",
            data: [10, 12, 11, 14, 10],
          },
          {
            name: "医疗卫生",
            type: "line",
            data: [8, 13, 14, 12, 13],
          },
          {
            name: "艺术教育",
            type: "line",
            data: [12, 11, 14, 10, 7],
          },
          {
            name: "笔墨纸砚",
            type: "line",
            data: [5, 3, 4, 6, 4],
          },
          {
            name: "其它",
            type: "line",
            data: [6, 7, 9, 5, 8],
          },
        ],
      };
      myChart.resize();
      myChart.setOption(option);
    },
    initCharts2() {
      var echarts = require("echarts");
      var chartDom = document.getElementById("main2");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "3%",
          left: "center",
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["30%", "60%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: "公共课" },
              { value: 735, name: "计算机类" },
              { value: 580, name: "经济管理" },
              { value: 484, name: "土木工程" },
              { value: 1048, name: "机械制造" },
              { value: 735, name: "自动化类" },
              { value: 580, name: "通信电子" },
              { value: 484, name: "法律法规" },
              { value: 300, name: "生化环材" },
              { value: 1048, name: "文史哲学" },
              { value: 735, name: "医疗卫生" },
              { value: 580, name: "艺术教育" },
              { value: 484, name: "笔墨纸砚" },
              { value: 300, name: "其它" },
            ],
          },
        ],
      };
      myChart.resize();
      myChart.setOption(option);
    },
  },
};
</script>

<style>
.statistics {
  height: 100%;
}
.el-breadcrumb {
  height: 5px;
  padding: 10px;
  border-radius: 4px;
  /*box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);*/
}
.line {
  border-left: 3px solid #31c17b;
  padding-left: 10px;
}
.x {
  float: left;
  border: 1px solid rgb(84, 112, 198);
  height: 80px;
  width: 120px;
  border-radius: 5px;
  text-align: center;
  margin: 20px 0 0 170px;
  background: rgb(84, 112, 198);
}
.y {
  margin: 8% 0 6px 0;
}
.item1 {
  width: 100%;
  height: 140px;
}
.item2 {
  width: 100%;
  height: 420px;
  /*float: left;*/
  margin: 0px auto;
}
.item3 {
  width: 100%;
  height: 700px;
  /*float: left;*/
  margin: 0px auto;
}
</style>